<!DOCTYPE html>
<!-- saved from url=(0041)http://wx.zhongfubang.com/order_list.html -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>电子凭证</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./css/mui.min.css" rel="stylesheet">
		<link href="./css/pingzheng.css" rel="stylesheet">
		<style type="text/css" abt="234"></style>
		<style type="text/css"></style>
		<script>
			//console.log('a')
		</script>
		<script>
			//remove 17173 video ad
		</script>
		<style type="text/css">
			object,
			embed {
				-webkit-animation-duration: .001s;
				-webkit-animation-name: playerInserted;
				-ms-animation-duration: .001s;
				-ms-animation-name: playerInserted;
				-o-animation-duration: .001s;
				-o-animation-name: playerInserted;
				animation-duration: .001s;
				animation-name: playerInserted;
			}
			
			@-webkit-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-ms-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-o-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			.mui-bar-tab .mui-tab-item.mui-active {
    			color: rgb(255, 91, 55);
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav bgcolor">

			<h1 class="mui-title">电子凭证</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="mui-content" id="app">
			<div class="head-title">
				<div class="mui-row row1">
					<p>电子凭证</p>
				</div>
				<div class="mui-row row2">
					<p>您的全部凭证（<span class="number textcolor" id="num">{{order_list.length}}</span>张）</p>
				</div>
			</div>
			<div class="bigcardbox">
				<template v-for="v in order_list">
					<div class="mui-card">
						<div class="mui-card-header  mui-card-media">
							<div class="mui-media-body">
								<div class="mui-row row1">
									<span class="cardtitle">{{v.productName}}</span>
								</div>
								<div class="mui-row row2">
									<span class="name">{{v.applyPeopleName}}</span>
								</div>
							</div>
						</div>
						<div class="mui-card-content">
							<div class="money-row mui-row">
								<div class="mui-col-sm-9 mui-col-xs-9">

									<p>
										<span class="numstate">
											<template v-if="v.amount >=0">正常</template>
											<template v-if="v.amount <0">已欠费</template>
											(余额:{{v.amount}}元)
										</span>
										<span class="mui-icon mui-icon-info textcolor"></span>
									</p>
								</div>

							</div>
							<div class="rate-row">
								<div class="mui-row row1">
									<p>观察期进度&nbsp;&nbsp;
										<span class="rate-state">
										<!--	
										<template v-if="v.observation_time > v.now_time">
											进行中
										</template>
										<template v-if="v.observation_time < v.now_time">
											已完成
										</template>
										-->
										{{v.observationPeriodStatus}}
									</span>
									</p>
								</div>
								<div class="mui-row row2">
									<p>
										<span class="mui-icon mui-icon-info textcolor"></span> &nbsp;&nbsp;当前{{v.totalDays}}天
									</p>
								</div>
							</div>
						</div>
						<div class="mui-card-footer bgcolor" @tap="order_info" :data-id="v.id">
							<div class="mui-row foot-row">
								<a>查看此凭证</a>
							</div>
						</div>
					</div>
				</template>
				<!--
				<template v-for="v in order_list">
					<div class="mui-card">
						<div class="mui-card-header  mui-card-media">
							<div class="mui-media-body">
								<div class="mui-row row1">
									<span class="cardtitle">{{v.project_title}}</span>
								</div>
								<div class="mui-row row2">
									<span class="name">{{v.realname}}</span>
								</div>
							</div>
						</div>
						<div class="mui-card-content">
							<div class="money-row mui-row">
								<div class="mui-col-sm-9 mui-col-xs-9">

									<p>
										<span class="numstate">
											<template v-if="v.state == 1">正常</template>
											<template v-if="v.state == -1">已欠费</template>
											(余额:{{v.balance}}元)
										</span>
										<span class="mui-icon mui-icon-info textcolor"></span>
									</p>
								</div>
								<div class="mui-col-sm-3 mui-col-xs-3">
									<button class="mui-btn " :data-id='v.id' style="background: rgb(255, 91, 55);color: white;" @tap="recharge">充值</button>
								</div>
							</div>
							<div class="rate-row">
								<div class="mui-row row1">
									<p>观察期进度&nbsp;&nbsp;
										<span class="rate-state">
											<template v-if="v.observation_time > v.now_time">
												进行中
											</template>
											<template v-if="v.observation_time < v.now_time">
												已完成
											</template>
										</span>
									</p>
								</div>
								<div class="mui-row row2">
									<p>
										<span class="mui-icon mui-icon-info textcolor"></span> &nbsp;&nbsp;当前{{Math.ceil((v.now_time - v.addtime)/(60*60*24))}}天
									</p>
								</div>
							</div>
						</div>
						<div class="mui-card-footer bgcolor" @tap="order_info" :data-id="v.id">
							<div class="mui-row foot-row">
								<a>查看此凭证</a>
							</div>
						</div>
					</div>
				</template>
				-->
			</div>
		</div>
		<div class="bigcardbox">
			<br/><br/><br/><br/><br/>
		</div>

		</div>

		<div class="bigcardbox">
			<br><br><br><br><br>
		</div>
		
		<nav class="mui-bar mui-bar-tab">
				<a href="index.html" class="mui-tab-item "><span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span></a>
				<a href="order_list.html" class="mui-tab-item mui-active"><span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">互助</span></a>
				<a href="new_list.html" class="mui-tab-item "><span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">关爱</span></a>
				<a href="myCenter.html" class="mui-tab-item"><span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label">我的</span></a>
			</nav>

		<script src="./js/mui.js"></script>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<!--stepbar-->

		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			mui.plusReady(function() {

			})

			var vue = new Vue({
				el: "#app",
				data: {
					order_list: [],
					yiyuan_order_list: [],
					yiyuan_info: []
				},
				methods: {
					/*order_info: function(event) {
						var self = event.currentTarget;
						var order_id = self.getAttribute("data-id");
						mui.openWindow('order_info.html?order_id=' + order_id, '', {});
					},*/
					order_info: function(event) {
						var self = event.currentTarget;
						var order_id = self.getAttribute("data-id");
						mui.openWindow('order_detail.html?order_id=' + order_id, '', {});
					}
					/*recharge: function(event) {
						var self = event.currentTarget;
						var order_id = self.getAttribute("data-id");
						mui.openWindow('recharge.html?order_id=' + order_id, '', {});
					}*/
				}
			})

			window.onload = load();
			var appUser;
			function load() {
				checkVersion();
				if($.getUrlParam('pay')=='success'){
					mui.alert("支付成功");
				}else{
					mui.alert("支付失败，请稍后重试");
				}
				if(isNull(localStorage.appUser)){
					mui.openWindow('login.html', '', {});
					return;
				}
				appUser = JSON.parse(localStorage.appUser);
				get_order_list();
			}

			function get_order_list() {
				var url = root + 'myCenter/electronicProductList';
				mui.get(url, {
						appUserId: appUser.id
					},
					function(result) {
						vue.order_list = result.data;

					}, 'json'
				);

				/*url = root + 'get_yiyuan_order_list';
				mui.post(url, {
						user_id: user_id
					},
					function(data) {
						vue.yiyuan_order_list = data.yiyuan_order_list;
						vue.yiyuan_info = data.yiyuan_info;
					}, 'json'
				);*/

			}

			function topingzhenginfo(id) {
				mui.openWindow('pingzheng-info.html', 'pingzheng_info', {
					extras: {
						pingzhengID: id
					}
				});
			}
			
			mui('.mui-bar-tab').on('tap','a',function(){
				var href = this.getAttribute('href');
				if(href=="myCenter.html"||href=="order_list.html"){
					if(!isLogin()){
						window.location.href="login.html";
					}else{
						window.location.href=this.getAttribute('href');
					}
				}else{
					window.location.href=this.getAttribute('href');
				}
          });
			
		</script>

	</body>

</html>